home *** CD-ROM | disk | FTP | other *** search
/ PC World 2008 March / PCWorld_2008-03_cd.bin / v cisle / xulplayer / xulplayer-0.2.1.5.exe / xulrunner / res / forms.css < prev    next >
Cascading Style Sheet File  |  2007-07-27  |  15KB  |  572 lines
  1. /* ***** BEGIN LICENSE BLOCK *****
  2.  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  3.  *
  4.  * The contents of this file are subject to the Mozilla Public License Version
  5.  * 1.1 (the "License"); you may not use this file except in compliance with
  6.  * the License. You may obtain a copy of the License at
  7.  * http://www.mozilla.org/MPL/
  8.  *
  9.  * Software distributed under the License is distributed on an "AS IS" basis,
  10.  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11.  * for the specific language governing rights and limitations under the
  12.  * License.
  13.  *
  14.  * The Original Code is mozilla.org code.
  15.  *
  16.  * The Initial Developer of the Original Code is
  17.  * Netscape Communications Corporation.
  18.  * Portions created by the Initial Developer are Copyright (C) 1998
  19.  * the Initial Developer. All Rights Reserved.
  20.  *
  21.  * Contributor(s):
  22.  *
  23.  * Alternatively, the contents of this file may be used under the terms of
  24.  * either of the GNU General Public License Version 2 or later (the "GPL"),
  25.  * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  26.  * in which case the provisions of the GPL or the LGPL are applicable instead
  27.  * of those above. If you wish to allow use of your version of this file only
  28.  * under the terms of either the GPL or the LGPL, and not to allow others to
  29.  * use your version of this file under the terms of the MPL, indicate your
  30.  * decision by deleting the provisions above and replace them with the notice
  31.  * and other provisions required by the GPL or the LGPL. If you do not delete
  32.  * the provisions above, a recipient may use your version of this file under
  33.  * the terms of any one of the MPL, the GPL or the LGPL.
  34.  *
  35.  * ***** END LICENSE BLOCK ***** */
  36.  
  37. /** 
  38.   Styles for old GFX form widgets
  39.  **/ 
  40.  
  41.  
  42. @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
  43. @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  44.  
  45. *|*::-moz-fieldset-content {
  46.   display: block;
  47.   height: 100%;   /* Need this so percentage heights of kids work right */
  48. }
  49.  
  50. /* miscellaneous form elements */
  51.  
  52. legend {
  53.   padding-left: 2px;
  54.   padding-right: 2px;
  55.   border: none;
  56.   position: static ! important;
  57.   float: none ! important;
  58. }
  59.  
  60. fieldset {
  61.   display: block;
  62.   margin-left: 2px;
  63.   margin-right: 2px;
  64.   padding: 0.35em 0.625em 0.75em;
  65.   border: 2px groove ThreeDFace;
  66. }
  67.  
  68. label {
  69.   cursor: default;
  70. }
  71.  
  72. /* default inputs, text inputs, and selects */
  73.  
  74. /* Note: Values in nsNativeTheme IsWidgetStyled function 
  75.    need to match textfield background/border values here */
  76.  
  77. input {
  78.   -moz-appearance: textfield;
  79.   /* The sum of border-top, border-bottom, padding-top, padding-bottom
  80.      must be the same here, for buttons, and for <select> (including its
  81.      internal padding magic) */
  82.   padding: 1px 0 1px 0;
  83.   border: 2px inset ThreeDFace;
  84.   background-color: -moz-Field;
  85.   color: -moz-FieldText;
  86.   font: -moz-field;
  87.   line-height: normal !important;
  88.   text-align: start;
  89.   text-transform: none;
  90.   word-spacing: normal;
  91.   letter-spacing: normal;
  92.   cursor: text;
  93.   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
  94.   text-indent: 0;
  95.   -moz-user-select: text;
  96. }
  97.  
  98. input > .anonymous-div {
  99.   white-space: pre;
  100. }
  101.  
  102. textarea {
  103.   margin: 1px 0 1px 0;
  104.   border: 2px inset ThreeDFace;
  105.   background-color: -moz-Field;
  106.   color: -moz-FieldText;
  107.   font: medium -moz-fixed;
  108.   text-align: start;
  109.   text-transform: none;
  110.   word-spacing: normal;
  111.   letter-spacing: normal;
  112.   vertical-align: text-bottom;
  113.   cursor: text;
  114.   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");
  115.   -moz-appearance: textfield-multiline;
  116.   text-indent: 0;
  117.   -moz-user-select: text;
  118. }
  119.  
  120. textarea > scrollbar {
  121.   cursor: default;
  122. }
  123.  
  124. textarea > .anonymous-div,
  125. input > .anonymous-div {
  126.   overflow: auto;
  127.   border: 0px !important;
  128.   /* The 1px horizontal padding is for parity with Win/IE */
  129.   padding: 0px 1px;
  130.   margin: 0px;
  131.   /* XXXldb I'm not sure if we really want the 'text-decoration: inherit',
  132.      but it's needed to make 'text-decoration' "work" on text inputs. */
  133.   text-decoration: inherit;
  134.   ime-mode: inherit;
  135. }
  136.  
  137. input:-moz-read-write,
  138. textarea:-moz-read-write {
  139.   -moz-user-modify: read-write !important;
  140. }
  141.  
  142. select {
  143.   margin: 0;
  144.   border-color: ThreeDFace;
  145.   background-color: -moz-Field;
  146.   color: -moz-FieldText;
  147.   font: -moz-list;
  148.   line-height: normal !important;
  149.   white-space: nowrap !important;
  150.   text-align: start; 
  151.   cursor: default;
  152.   -moz-box-sizing: border-box;
  153.   -moz-user-select: none;
  154.   -moz-appearance: menulist;
  155.   border-width: 2px;
  156.   border-style: inset;
  157.   text-indent: 0;
  158.   overflow: -moz-hidden-unscrollable;
  159. }
  160.  
  161. /* Need the "select[size][multiple]" selector to override the settings on
  162.    'select[size="1"]', eg if one has <select size="1" multiple> */
  163.    
  164. select[size],
  165. select[multiple],
  166. select[size][multiple] {
  167.   /* Different alignment and padding for listbox vs combobox */
  168.   vertical-align: text-bottom;
  169.   padding: 1px 0 1px 0;
  170.   -moz-appearance: listbox;
  171. }
  172.  
  173. select[size="0"],
  174. select[size="1"] {
  175.   /* Except this is not a listbox */
  176.   vertical-align: baseline;
  177.   padding: 0;
  178.   -moz-appearance: menulist;
  179. }
  180.  
  181. select > input[type="button"] {
  182.   width: 12px;
  183.   height: 12px;
  184.   white-space: nowrap;
  185.   position: static !important;
  186.   background-image: url("arrow.gif") !important;
  187.   background-repeat: no-repeat !important;
  188.   background-position: center !important;
  189.   -moz-appearance: menulist-button;
  190.  
  191.   /* Make sure to size correctly if the combobox has a non-auto height. */
  192.   height: 100% ! important;
  193.   -moz-box-sizing: border-box ! important;
  194.  
  195.   /*
  196.     Make sure to align properly with the display frame.  Note that we
  197.     want the baseline of the combobox to match the baseline of the
  198.     display frame, so the dropmarker is what gets the vertical-align.
  199.   */
  200.   vertical-align: top !important;
  201. }
  202.  
  203. select > input[type="button"]:active {
  204.   background-image: url("arrowd.gif") !important;
  205. }
  206.  
  207. select:empty {
  208.   min-width: 2.5em;
  209. }
  210.  
  211. *|*::-moz-display-comboboxcontrol-frame {
  212.   overflow: -moz-hidden-unscrollable;
  213.   /* This top/bottom padding plus the combobox top/bottom border need to
  214.      add up to the top/bottom borderpadding of text inputs and buttons */ 
  215.   padding-top: 1px;
  216.   padding-bottom: 1px;
  217.   -moz-padding-start: 4px;
  218.   -moz-padding-end: 0;
  219.   background-color: inherit;
  220.   color: inherit;
  221.   white-space: nowrap;
  222.   text-align: inherit;
  223.   -moz-user-select: none;
  224.   /* Make sure to size correctly if the combobox has a non-auto height. */
  225.   height: 100% ! important;
  226.   -moz-box-sizing: border-box ! important;
  227. }
  228.  
  229. select::-moz-scrolled-content {
  230.   display: block !important;
  231. }
  232.  
  233. option {
  234.   display: block;
  235.   float: none !important;
  236.   position: static !important;
  237.   min-height: 1em;
  238.   line-height: normal !important;
  239.   -moz-user-select: none;
  240.   text-indent: 0;
  241. }
  242.  
  243. select > option {
  244.   padding-top : 0;
  245.   padding-bottom: 0;
  246.   -moz-padding-start: 3px;
  247.   -moz-padding-end: 5px;
  248. }
  249.  
  250. option:checked {
  251.   background-color: Highlight ! important;
  252.   color: HighlightText ! important;
  253. }
  254.  
  255. optgroup {
  256.   display: block;
  257.   float: none !important;
  258.   position: static !important;
  259.   font: -moz-list;
  260.   line-height: normal !important;
  261.   font-style: italic;
  262.   font-weight: bold;
  263.   font-size: inherit;
  264.   -moz-user-select: none;
  265.   text-indent: 0;
  266. }
  267.  
  268. optgroup > option {
  269.   -moz-padding-start: 20px;
  270.   font-style: normal;
  271.   font-weight: normal;
  272. }
  273.  
  274. optgroup:before {
  275.   display: block;
  276.   content: attr(label);
  277. }
  278.  
  279. *|*::-moz-dropdown-list {
  280.   z-index: 2147483647;
  281.   background-color: inherit;
  282.   -moz-user-select: none;
  283.   position: static !important;
  284.   float: none !important;
  285.  
  286.   /*
  287.    * We can't change the padding here, because that would affect our
  288.    * intrinsic width, since we scroll.  But at the same time, we want
  289.    * to make sure that our left border+padding matches the left
  290.    * border+padding of a combobox so that our scrollbar will line up
  291.    * with the dropmarker.  So set our left border to 2px.
  292.    */
  293.   border: 1px outset black !important;
  294.   border-left-width: 2px ! important;
  295. } 
  296.  
  297. input[disabled],
  298. textarea[disabled],
  299. option[disabled],
  300. optgroup[disabled],
  301. select[disabled] {
  302.   -moz-user-input: disabled;
  303.   -moz-user-focus: ignore;
  304.   color: GrayText;
  305.   background-color: ThreeDFace;
  306.   cursor: inherit;
  307. }
  308.  
  309. option[disabled],
  310. optgroup[disabled] {
  311.   background-color: transparent;
  312. }
  313.  
  314. /* hidden inputs */
  315. input[type="hidden"] {
  316.   -moz-appearance: none;
  317.   display: none;
  318.   padding: 0;
  319.   border: 0;
  320.   cursor: auto;
  321.   -moz-user-focus: ignore;
  322.   -moz-binding: none;
  323. }
  324.  
  325. /* image buttons */
  326. input[type="image"] {
  327.   -moz-appearance: none;
  328.   padding: 0;
  329.   border: none;
  330.   background-color: transparent;
  331.   font-family: sans-serif;
  332.   font-size: small;
  333.   cursor: pointer;
  334.   -moz-binding: none;
  335. }
  336.  
  337. input[type="image"][disabled] {
  338.   cursor: inherit;
  339. }
  340.  
  341. input[type="image"]:focus {
  342.   /* Don't specify the outline-color, we should always use initial value. */
  343.   outline: 1px dotted;
  344. }
  345.  
  346. /* file selector */
  347. input[type="file"] {
  348.   -moz-appearance: none;
  349.   white-space: nowrap;
  350.   cursor: default;
  351.   -moz-binding: none;
  352.  
  353.   padding: 0 !important;
  354.   border-style: none !important;
  355. }
  356.  
  357. input[type="file"] > input[type="text"][disabled] {
  358.   border-color: inherit;
  359.   background-color: inherit;
  360.   -moz-user-focus: ignore !important;
  361.   /* enable user input so that clicking on the control can bring up the
  362.      file dialog. It's still read-only. */
  363.   -moz-user-input: enabled;
  364.   color: inherit;
  365.   font-size: inherit;
  366.   height: inherit;
  367.   letter-spacing: inherit;
  368. }
  369.  
  370. /* button part of file selector */
  371. input[type="file"] > input[type="button"] {
  372.   height: inherit;
  373.   font-size: inherit;
  374.   letter-spacing: inherit;
  375. }
  376.  
  377. /* radio buttons */
  378. input[type="radio"] {
  379.   -moz-appearance: radio-small;
  380.   width: 13px;
  381.   height: 13px;
  382.   margin: 3px 3px 0px 5px;
  383.   padding: 0 !important;
  384.   cursor: default;
  385.   -moz-binding: none;
  386.  
  387.   -moz-border-radius: 100% !important;
  388. }
  389.  
  390. /* check boxes */
  391. input[type="checkbox"] {
  392.   -moz-appearance: checkbox-small;
  393.   width: 13px;
  394.   height: 13px;
  395.   margin: 3px 3px 3px 4px;
  396.   padding: 0 !important;
  397.   vertical-align: text-bottom;
  398.   cursor: default;
  399.   -moz-binding: none;
  400.  
  401.   -moz-border-radius: 0 !important;
  402. }
  403.  
  404. /* common features of radio buttons and check boxes */
  405.  
  406. input[type="radio"],
  407. input[type="checkbox"] {
  408.   /* same colors as |input| rule, but |!important| this time. */
  409.   -moz-box-sizing: border-box;
  410.   background-color: -moz-Field ! important;
  411.   color: -moz-FieldText ! important;
  412.   border: 2px inset ThreeDFace ! important;
  413. }
  414.  
  415. input[type="radio"][disabled],
  416. input[type="radio"][disabled]:active,
  417. input[type="radio"][disabled]:hover,
  418. input[type="radio"][disabled]:hover:active,
  419. input[type="checkbox"][disabled],
  420. input[type="checkbox"][disabled]:active,
  421. input[type="checkbox"][disabled]:hover,
  422. input[type="checkbox"][disabled]:hover:active {
  423.   padding: 1px;
  424.   border: 1px inset ThreeDShadow ! important;
  425.   /* same as above, but !important */
  426.   color: GrayText ! important;
  427.   background-color: ThreeDFace ! important;
  428.   cursor: inherit; 
  429. }
  430.  
  431. input[type="checkbox"]:focus,
  432. input[type="radio"]:focus {
  433.   border-style: groove !important;
  434. }
  435.  
  436. input[type="checkbox"]:hover:active,
  437. input[type="radio"]:hover:active {
  438.   background-color: ThreeDFace ! important;
  439.   border-style: inset !important;
  440. }
  441.  
  442. *|*::-moz-radio {
  443.   width: 4px;
  444.   height: 4px;
  445.   background-color: -moz-FieldText ! important;
  446.   -moz-border-radius: 3px;
  447. }
  448.  
  449. /* buttons */
  450.  
  451. /* Note: Values in nsNativeTheme IsWidgetStyled function 
  452.    need to match button background/border values here */
  453.  
  454. button, 
  455. input[type="reset"],
  456. input[type="button"],
  457. input[type="submit"] { 
  458.   -moz-appearance: button;
  459.   /* The sum of border-top, border-bottom, padding-top, padding-bottom
  460.      must be the same here, for text inputs, and for <select>.  For
  461.      buttons, make sure to include the -moz-focus-inner border/padding. */
  462.   padding: 0px 6px 0px 6px;
  463.   border: 2px outset ButtonFace;
  464.   background-color: ButtonFace;
  465.   color: ButtonText; 
  466.   font: -moz-button;
  467.   line-height: normal !important;
  468.   white-space: pre;
  469.   cursor: default;
  470.   -moz-box-sizing: border-box;
  471.   -moz-user-select: none;
  472.   -moz-binding: none;
  473.   text-align: center;
  474. }
  475.  
  476. button {
  477.   /* Buttons should lay out like "normal" html, mostly */
  478.   white-space: normal;  
  479.   text-indent: 0;
  480. }
  481.  
  482. *|*::-moz-button-content {
  483.   display: block;
  484. }
  485.  
  486. button:active:hover,
  487. input[type="reset"]:active:hover,
  488. input[type="button"]:active:hover,
  489. input[type="submit"]:active:hover {
  490.   padding: 0px 5px 0px 7px;
  491.   border-style: inset;
  492. }
  493.  
  494. button::-moz-focus-inner,
  495. input[type="reset"]::-moz-focus-inner,
  496. input[type="button"]::-moz-focus-inner,
  497. input[type="submit"]::-moz-focus-inner,
  498. input[type="file"] > input[type="button"]::-moz-focus-inner {
  499.   padding: 0px 2px 0px 2px;
  500.   border: 1px dotted transparent;
  501. }
  502.  
  503. button:focus::-moz-focus-inner,
  504. input[type="reset"]:focus::-moz-focus-inner,
  505. input[type="button"]:focus::-moz-focus-inner,
  506. input[type="submit"]:focus::-moz-focus-inner,
  507. input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
  508.   border-color: ButtonText;
  509. }
  510.  
  511. button[disabled]:active, button[disabled],
  512. input[type="reset"][disabled]:active,
  513. input[type="reset"][disabled],
  514. input[type="button"][disabled]:active,
  515. input[type="button"][disabled],
  516. select[disabled] > input[type="button"],
  517. select[disabled] > input[type="button"]:active,
  518. input[type="submit"][disabled]:active,
  519. input[type="submit"][disabled] {
  520.   /* The sum of border-top, border-bottom, padding-top, padding-bottom
  521.      must be the same here and for text inputs */
  522.   padding: 1px 7px 1px 7px;
  523.   border: 1px outset ButtonShadow;
  524.   color: GrayText;
  525.   cursor: inherit; 
  526. }
  527.  
  528.  /*
  529.   * Make form controls inherit 'unicode-bidi' transparently as required by
  530.   *  their various anonymous descendants and pseudo-elements:
  531.   *
  532.   * <textarea> and <input type="text">:
  533.   *  inherit into the XULScroll frame with class 'anonymous-div' which is a
  534.   *  child of the text control.
  535.   *
  536.   * Buttons (either <button>, <input type="submit">, <input type="button">
  537.   *          or <input type="reset">)
  538.   *  inherit into the ':-moz-button-content' pseudo-element.
  539.   *
  540.   * <select>:
  541.   *  inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
  542.   *  the <optgroup>'s ':before' pseudo-element, which is where the label of
  543.   *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
  544.   *  so they need no special rules.
  545.   */
  546. textarea > .anonymous-div,
  547. input > .anonymous-div,
  548. *|*::-moz-button-content,
  549. *|*::-moz-display-comboboxcontrol-frame,
  550. optgroup:before {
  551.   unicode-bidi: inherit;
  552. }
  553.  
  554.  /*
  555.   * Force the text control child of file input controls to have left-to-right
  556.   * directionality. Otherwise filenames containing right-to-left characters
  557.   * will be reordered with chaotic results.
  558.   */
  559. input[type="file"] > input[type="text"] {
  560.   direction: ltr !important;
  561.   text-align: inherit;
  562. }
  563.  
  564. @media print {
  565.   input, textarea, select, button {
  566.     -moz-user-input: none !important;
  567.   }
  568.  
  569.   input[type="file"] { height: 2em; }
  570. }
  571.  
  572.